<template>
  <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler">
    <div @click="clickMap()" class="but">一键导航</div>
    <!--比例尺-->
    <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
    <!--缩放-->
    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
    <!--地图类型-->
    <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
    <!--缩略图-->
    <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>
    <!--定位-->
    <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
    <!--版权-->
    <bm-copyright
      anchor="BMAP_ANCHOR_TOP_RIGHT"
      :copyright="[{id: 1, content: 'Copyright Message', bounds: {ne: {lng: 110, lat: 40}, sw:{lng: 0, lat: 0}}}, {id: 2, content: '<a>汇锦富图所属版权</a>'}]">
    </bm-copyright>
    <!--点-->
    <bm-marker
      :position="{lng: 117.0094, lat: 36.6685860199}"
      :dragging="true"
      animation="BMAP_ANIMATION_BOUNCE"
    >
    </bm-marker>
    <!--信息框-->
    <bm-info-window
      class="info"
      :position="{lng: 117.01001846328, lat: 36.66979989}"
      @close="infoWindowClose"
      @open="infoWindowOpen"
      :show="show"
    >
      <h3 v-html="title"></h3>
      <p v-text="contents"></p>
    </bm-info-window>
  </baidu-map>
</template>

<script>
export default {
  name: 'Map',
  data () {
    return {
      center: { lng: 0, lat: 0 },
      zoom: 3,
      show: true,
      title: '木屋Pizza',
      contents: '地址：济南市市中区万达广场D座2单元1层2-109室'
    }
  },
  methods: {
    handler ({ BMap, map }) {
      console.log(BMap, map)
      this.center.lng = 117.0101846328
      this.center.lat = 36.6685860199
      this.zoom = 16
    },
    infoWindowClose (e) {
      this.show = false
    },
    infoWindowOpen (e) {
      this.show = true
    },
    clickMap () {
      // 腾讯的一键导航
      location.href = 'http://apis.map.qq.com/tools/poimarker?type=1&keyword=济南&center=36.6685860199,117.0101846328&radius=1000&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp'
    }
  }
}
</script>

<style lang="stylus" scoped>
  .map
    width 100%
    height 1330px
    .but
      position absolute
      top 10%
      left 50%
      margin-left -70px
      width: 140px
      height 60px
      text-align center
      line-height 60px
      background #5e81ac
      color: #fff
      font-size 25px
  .info
    h3
      font-size 30px
      color #1d67c1
      margin 15px 0 20px 0
    p
      font-size 23px
      color #403434
  .map >>> .BMap_cpyCtrl
    top 20%!important
    a
      color red!important
</style>
